<template>
    <fieldset>
        <div class="container">
            <Todoinput @add="addTodo"></Todoinput>
            <Todolist :data="newData" @del="delTodo" @getFlag="handleGetFlag" :allCount="allCount" :completedCount="completedCount" :activeCount="activeCount"></Todolist>
        </div>
    </fieldset>
    
</template>
<script setup>
import Todoinput from "../todolist/todoinput.vue"
import Todolist from "../todolist/todolist.vue"
import {ref,computed} from "vue"
// 功能
// 1.列表展示
// 2.增加功能
// 3.删除功能
// 4.选中和未选中
// 5.展示数量
// 6.永久存储

// 声明数据,用列表展示出来(父传子)
let data =ref(JSON.parse(localStorage.getItem('k')))
// let data = ref([
//     {
//         id:1,
//         td:'吃饭',
//         isCompleted:false
//     },
//     {
//         id:2,
//         td:'睡觉',
//         isCompleted:false
//     },
//     {
//         id:3,
//         td:'喝水',
//         isCompleted:true
//     },
// ])
// 增加todo
//增加todo
let addTodo = (input) => {
    console.log(input)
    //声明一个对象再push
    let obj = {
        id: Math.random().toString(32).substring(2),
        todo: input,
        isCompleted: false
    }
    data.value.push(obj)
    // 永久存储
    localStorage.setItem('k',JSON.stringify(data.value))
}
// 删除todo
let delTodo = (input) =>{
    console.log(input);
    data.value.splice(input,1)
    // 永久存储
    localStorage.setItem('k',JSON.stringify(data.value))
}
// 接收筛选的字段
let filterFlag = ref("all")
let handleGetFlag = flag =>{
    console.log(flag);
    filterFlag.value = flag
}
// 声明三个响应式变量，根据计算属性来进行赋值计算
let allCount = ref(0)
let completedCount = ref(0)
let activeCount = ref(0)
// 处理数据
let newData = computed(()=>{
    // 全部的数据
    let all = data.value;
    // 已完成的数据
    let completed = data.value.filter(item=>item.isCompleted===true)
    // 未完成的数据
    let active = data.value.filter(item=>item.isCompleted===false)
    // 全部数量
    allCount = all.length
    // 已完成数量
    completedCount = completed.length
    // 未完成数量
    activeCount = active.length
    // console.log(filterFlag.value);
    switch(filterFlag.value){
        case "all":
            return all;
        case "completed":
            return completed;
        case "active":
            return active;
    }
})
</script>
<!-- 样式 -->
<style scoped>
fieldset{
    align-items: center;
    background-image: linear-gradient(90deg,#affff3,#18aca5);
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    min-height: 100vh;
    padding: 50px 0;
}
.container{
   background: #f2f2f2;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    max-width: 100%;
    padding: 30px 40px 20px;
    text-align: center;
    width: 440px;

}
</style>